<template>
    <div class="user-box">
        <!--顶部-->
        <div class="user-info">
            <text class="user-set"><image resize="stretch" class="icon" src="https://github.com/guoyx1993/weex-demo/blob/master/src/images/09.png?raw=true"></image><text class="text">设置</text></text>
            <div class="user-text">
                <div class="user-attention">
                    <text class="text">5120</text>
                    <text class="text mtop15">关注</text>
                </div>
                <div class="user-head">
                    <div class="head"><image src=""></image></div>
                    <text class="text text2">这里是名字</text>
                </div>
                <div class="user-fans">
                    <text class="text">120</text>
                    <text class="text mtop15">粉丝</text>
                </div>
            </div>
        </div>
        <!--充值-->
        <div class="account">
            <div class="account-pay">
                <image class="img" resize="stretch" src="https://github.com/guoyx1993/weex-demo/blob/master/src/images/10.png?raw=true"></image>
            </div>
            <div class="account-money">
                <image class="img" resize="stretch" src="https://github.com/guoyx1993/weex-demo/blob/master/src/images/05.png?raw=true"></image>
            </div>
        </div>
        <!--其他列表-->
        <div class="other-list">
            <div class="list">
                <image class="img-icon" src="https://github.com/guoyx1993/weex-demo/blob/master/src/images/11.png?raw=true"></image>
                <text class="text1">我的订单</text>
                <image class="arrow arrow1" src="https://github.com/guoyx1993/weex-demo/blob/master/src/images/13.png?raw=true"></image>
            </div>
            <div class="list">
                <image class="img-icon" src="https://github.com/guoyx1993/weex-demo/blob/master/src/images/11.png?raw=true"></image>
                <text class="text1">成为神仙</text>
                <image class="arrow arrow2" src="https://github.com/guoyx1993/weex-demo/blob/master/src/images/13.png?raw=true"></image>
            </div>
            <div class="list">
                <image class="img-icon" src="https://github.com/guoyx1993/weex-demo/blob/master/src/images/11.png?raw=true"></image>
                <text class="text1">优惠券</text>
                <image class="arrow arrow3" src="https://github.com/guoyx1993/weex-demo/blob/master/src/images/13.png?raw=true"></image>
            </div>
        </div>
    </div>
</template>
<script>
	import { WxcCell } from 'weex-ui'
    import mixins from './../../mixins'
    export default{
        mixins:[mixins],
    	data(){
    		return{

    		}
    	},
    	components:{WxcCell},
    	mounted:function(){},
    	methods:{}
    }
</script>
<style scoped>
.user-box{
	width: 750px;
    min-height: 1200px;
    background-color: #eee;
}
.user-info{
	height: 370px;
	color: #fff;
	font-size: 32px;
	background-color: #ff238d;
}
.user-info .text{
	color: #fff;
	font-size: 32px;
}
.user-set{
    text-align: right;
    padding-top: 28px;
    padding-right: 28px;
    padding-bottom: 28px;
    color: #fff;
    flex-direction: row;
    justify-content: flex-end;
}
.user-set .icon{
    width: 32px;
    height: 32px;
}
.user-text{
	flex-direction: row;
	justify-content: center;
}
.user-attention .text,.user-head .text,.user-fans .text{
	text-align: center;
    color: #fff;
}
.user-attention,.user-fans{
    width: 160px;
    margin-top: 20px;
}
.user-head{
	width: 210px;
	text-align: center;
}
.user-head .head{
    width: 160px;
    height: 160px;
    border-style: solid;
	border-width: 2px;
	margin-left: 23px;
    border-color: #fff;
    border-radius: 50%;
}
.text2{
	text-align: center;
	margin-top: 30px;
}
.mtop15{
    margin-top: 12px;
    font-size: 24px;
}
.account{
    width: 750px;
    height: 160px;
    flex-direction: row;
    justify-content: center;
    background-color: #fff;
}
.account-pay,.account-money{
    width: 375px;
}
.account .img{
    width: 360px;
    height: 120px;
    margin-left: 7px;
    margin-top: 20px;
}
.other-list{
    margin-top: 15px;
    flex-direction: column;
}
.other-list .list{
    align-items: center;
    flex-direction: row;
    height: 80px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #ccc;
}
.list .text1{
    color: #484848;
    margin-left: 35px;
    margin-top: 0;
}
.img-icon{
    margin-left: 40px;
    width: 44px;
    height: 40px;
}
.arrow{
    width: 24px;
    height: 34px;
    margin-top: 4px;
}
.arrow1,.arrow2{
    margin-left: 440px;
}
.arrow3{
     margin-left: 472px;
}
</style>